<template>
  <div class="app-container">
    <div class="book">
      <div class="book-item" v-for="(item,index) in list" :key="index" @click="goToInfo(item)">
        <span class="book-cover" :style="{backgroundImage:'url('+item.cover+')'}"></span>
        <div class="book-right">
          <span class="name" v-html="item.name">“小葱轻食记”——奶盖太贵买不起，那就自己一杯吧！</span>
          <span class="author">{{item.describ}}</span>
          <!-- <span class="desc">时下最流行的饮品应该就是奶盖了，.时下最流行的饮品应该就是奶盖了，.时下最流行的饮品应该就是奶盖了，.时下最流行的饮品应该就是奶盖了，.</span> -->
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { myCollect } from "@/api/index";
export default {
  data() {
    return {
      currentPage: 1,
      list: [],
      total: 0,
      pageSize: 16
    };
  },
  watch: {
    $route() {
      this.currentPage = Number(this.$route.query.currentPage) || 1;
      this.init(this.currentPage);
    }
  },
  components: {},
  created(){
    this.init();
  },
  watch: {
    $route() {
      this.currentPage = Number(this.$route.query.currentPage) || 1;
      this.init(this.currentPage);
    }
  },
  methods: {
    goToInfo(item) {
      this.$router.push("/read/content?articleId="+item.fileId+"&title="+item.name+"&cover="+item.cover);
    },
    init(pageNo) {
      myCollect(2, pageNo, this.pageSize).then(res => {
        console.log(res.data.date.list);
        this.total = res.data.date.total;
        this.list = res.data.date.list;
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.$router.push(this.$route.path + "?currentPage=" + this.currentPage);
    }
  }
};
</script>
<style lang="less" scoped>
.app-container {
  width: 100%;
}
.book {
  width: 100%;
  .book-item {
    width: 100%;
    margin-bottom: 24px;
    overflow: hidden;
    cursor: pointer;
    .book-cover {
      float: left;
      background: url("/static/images/base/read_box.png") no-repeat;
      background-size: cover;
      width: 322px;
      height: 160px;
      display: block;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }
    .book-right {
      float: left;
      margin-left: 30px;
      width: calc(100% - 353px);
      .name {
        font-size: 20px;
        line-height: 20px;
        margin-top: 28px;
        display: block;
        width: 100%;
      }
      .author {
        font-size: 18px;
        line-height: 18px;
        color: #a1a1a1;
        display: block;
        margin-top: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }
      .desc {
        color: #a1a1a1;
        margin-top: 22px;
        font-size: 16px;
        line-height: 16px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }
    }
  }
}
</style>

